<template>
    <div class="gray">
        <search></search>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#fff" >
            <van-swipe-item v-for="item in galleryList" :key="item.id" >
                <img :src="item.img_url" width="100%" height="375">
            </van-swipe-item>
        </van-swipe>
        <div class="good">
            <p>30天无忧退货</p>
            <p>48小时快速退款</p>
            <p>满88元包邮</p>
        </div>
        <div class="info">
            <p>{{infoList.name}}</p>
            <p>{{infoList.goods_brief}}</p>
            <p>￥{{infoList.retail_price}}</p>
        </div>
        <div class="brand" v-if="brand">
            <p>{{brand}}</p>
        </div>
        <div class="select">
            <p>请选择规格数量</p>
            <p><van-icon name="arrow" size=".5rem" color="#999" /></p>
        </div>
        <div class="params">
            <p>商品参数</p>
            <ul>
                <li v-for="item in attributeList" :key="item.name">
                    <p>{{item.name}}:</p>
                    <p>{{item.value}}</p>
                </li>
            </ul>
        </div>
        <div v-html="infoList.goods_desc" style="width:100%" class="goods"> </div>
        <div class="question">
            <div class="title">
                <p></p>
                <p>常见问题</p>
                <p></p>
            </div>
            <div class="issue">
                <ul>
                    <li v-for="item in issueList" :key="item.id">
                        <p>{{item.question}}</p>
                        <p>{{item.answer}}</p>
                    </li>
                </ul>
            </div>
        </div>
         <div class="question" id="none">
            <div class="title">
                <p></p>
                <p>大家都在看</p>
                <p></p>
            </div>
               <ul class="bian">
                    <li v-for="item in productList" :key="item.id" @click="toggle(item.id)">
                        <img :src="item.list_pic_url" width="165" height="165">
                        <p>{{item.name}}</p>
                        <p>￥{{item.retail_price}}</p>
                    </li>
               </ul>
         </div>
         <div class="fixed">
             <div class="fixed-l" @click="addcollects">
                 <van-icon name="star-o" size="22" :color="lists.collected ? 'red' : ''"/>
             </div>
             <div class="fixed-l">
                 <van-icon name="shopping-cart-o" size="22" :badge="lists.allnumber"/>
             </div>
              <van-cell class="mask" is-link @click="showPopup">
                <p @click="addBuy(infoList)">立即购买</p>
                <p @click="addCart">加入购物车</p>
             </van-cell>
             <van-popup v-model="show" position="bottom" :style="{ height: '32%' }"  closeable class="masks">
                 <div class="img">
                     <img :src="infoList.primary_pic_url" width="88" height="88">
                     <div class="text">
                        <p class="red">价格￥{{infoList.retail_price}}</p>
                        <p>请选择数量</p>
                     </div>
                 </div>
                 <p>数量</p>
                 <div class="box">
                     <button class="let" @click="tit" :class="num == 1 ? 'active' : '' "></button>
                     <input type="text" v-model="num">
                     <button class="add" @click="add"></button>
                 </div>
             </van-popup>
         </div>
      <height></height>
    </div>
</template>

<script>
import { Toast } from 'vant';
import height from "@/components/height.vue"
import search from "@/components/search"
import { info, addCart, addcollect } from "@/api/home/index.js"
export default {
    data() {
        return {
            galleryList:[],
            infoList:[],
            attributeList:[],
            // goodsList:"",
            issueList:[],
            productList:[],
            brand:'',
            show: false,
            num:1,
            lists:"" , //控制收藏的属性
            id:this.$route.query.ids
        };
    },
    // watch:{
    //     $route(to, from) {
    //         this.init(to.query.ids);
    //     }
    // },
    methods: {
        toggle(val){
            this.$router.replace(`/home/info?ids=${val}`)
        },
        addBuy(val){  //立即购买
            if(this.show){
                this.$store.commit("upOrder",val)
                this.$router.push({path:"/home/info/order"})
            }else{
               this.show = true 
            }
        },
        addcollects(){   //点击收藏
        
            addcollect({
                goodsId:this.id,
                openId:localStorage.getItem("openId")
            }).then(res=>{
                console.log(res);
                if(res.data.data == "success"){
                    this.init();
                    console.log(111);
                    Toast.success('已收藏');  //不知道为啥不生效
                   
                }
            })
        },
        tit(){ //减
            if(this.num > 1){
                this.num--;
            }
        },
        add(){ //加
           this.num++; 
        },
        addCart(){  //加入购物车
            var id = this.$route.query.ids;
            if(this.show){
                addCart({
                    goodsId:id,
                    number:this.num,
                    openId:localStorage.getItem("openId")
                }).then(res=>{
                    Toast.success('添加购物车成功');   //不知道为啥不生效
                    info({
                        id:this.$route.query.ids,
                        openId:localStorage.getItem("openId")
                    }).then(res=>{
                        this.lists = res.data;
                    })
                })
            }
        },
        showPopup() {
            this.show = true;
        },
        init(){
            // var id = this.$route.query.ids;
            console.log(this.$route.query.ids);
            info({
                id:this.id,
                openId:localStorage.getItem("openId")
            }).then(res=>{
                console.log(res.data);
                this.galleryList = res.data.gallery;
                this.infoList = res.data.info;
                this.attributeList = res.data.attribute
                this.issueList = res.data.issue;
                this.productList = res.data.productList;
                // this.brand = res.data.brand.name;  
                this.lists = res.data;
                console.log(res.data); 
            })
        },
        
    },
    //  beforeRouteUpdate(to, from, next) {
    //         // this.init(to.query.ids)
    //         this.id = to.query.ids;
    //         this.init();
    //         // 在当前路由改变，但是该组件被复用时调用
    //         // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    //         // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    //         // 可以访问组件实例 `this`
    //         next();
    // },
    created() {
        this.init()
    },
    computed: {

    },
    mounted() {

    },
    components:{
        search,
        height
    }
};
</script>

<style scoped lang="scss">

.gray{
    background-color: rgb(244,244,244);
}
  .good{
        height: 46px;
        padding: 0 10px;
        padding-left:15px;
        display: flex;
        background-color: rgb(244, 244, 244);
        justify-content: space-between;
        p{
            position: relative;
        }
        p::after{
            content: "";
            display: block;
            position: absolute;
            left: -7px;
            top: 25%;
            width: 3px;
            height: 3px;
            border-radius:50%;
            background-color: rgb(244, 244, 244);
            border: 1px solid #ab2b2b;
        }
    }
    .info{
        background-color: #fff;
        height: 140px;
        p{
            text-align: center;
        }
        p:first-child{
            font-size: .54667rem;
            padding: .26667rem;
        }
        p:nth-child(2){
            margin-bottom: .33333rem;
            font-size: .32rem;
            color: #999;
        }
        p:last-child{
            margin-top: .13333rem;
            font-size: .46667rem;
            color: #b4282d;
        }
    }
    .red{
        line-height: 60px;
         color: #b4282d;
    }
    .select{
        background-color: #fff;
        padding: 0 10px;
        margin-bottom:10px;
        display: flex;
        justify-content: space-between;
        border-top:1px solid rgb(244,244,244);
    }
    ul{
        list-style: none;
    }

    .params{
        margin-bottom:10px;
        padding: 10px 15px;
        background-color: #fff;
        p{
            font-size: .50667rem;
            padding: .26667rem 0;
            text-align: left;
            margin: 0;
        }
        ul{
            li{
                background-color: #f7f7f7;
                display: flex;
                margin: 10px;
                justify-content: center;
                align-items: center;
                p:first-child{
                    width: 1.78667rem;
                    font-size: .33333rem;
                    color: #999;
                }
                p:last-child{
                    flex: 1;
                    font-size: .33333rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
    .brand{
        background-color: #fff;
        p{
            display: inline-block;
            color: #b1a279;
            font-size: .26667rem;
            padding: .06667rem .4rem;
            border: .01333rem solid #b1a279;
        }
    }
.goods{
    ::v-deep p{
        margin: 0 ;
        padding: 0;
        width: 100%;
        img{
            display: block;
            width: 100%;
        }
    } 
}
#none{
    margin-bottom: 0;
}
 .question{
    margin-bottom:55px;
    background-color: #fff;
    .title{
        padding: 17px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        p{
            margin: 0;
        }
        p:first-child,p:last-child{
            height: 0.5px;
            width: 50px;
            background-color: #ccc;
        }
        p:nth-child(2){
            padding: 0 12.5px;
        }
    }
    .issue{
        padding: 0 15px;
        p{
            margin: 0;
            text-align: left;
        }
        p:first-child{
            margin-bottom: 10px;
            color: #303030;
            display: flex;
            align-items: center;
        }
        p:last-child{
            padding-bottom: 12px;
            color: #787878;
        }
         p:first-child::before{
            content:"";
            display:block;
            width: 5px;
            height: 5px;
            background-color: #b4282d;
            border-radius: 50%;
            margin-right:4px;
         }
    }
 }
    .bian{
        display: flex;
        justify-content: space-between;
        margin: 0 5px;
        flex-wrap:wrap ;
        list-style: none;
        li{
            width: 49.5%;
            background-color: #fff;
            margin-bottom: 1%;
            padding-bottom:5px;
            p{
                margin-bottom: .06667rem;
                text-align: left;
                text-indent: 1em;
            }
            p:last-child{
                color: #9c3232;
            }
        }
    }
    .fixed{
        background-color: #fff;
        height: 50px;
        width: 100%;
        display: flex;
        position: fixed;
        align-items: center;
        bottom: 0;
        left: 0;
        z-index: 10000;
        .fixed-l{
            width: 81.4px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            border: .01333rem solid #f4f4f4;
            z-index: 10000;
            background-color: #fff;
        }
        .mask{
            padding: 0;
            width: 210px;
            z-index: 10000;
            background-color: #fff;
            i{
                display: none;
            }
            .van-cell__value{
                height: 100%;
                display: flex;
                align-items: center;
                p{
                    width: 104.5px;
                    margin: 0;
                    height: 100%;
                    line-height: 50px;
                    text-align: center;
                }
                p:nth-child(2){
                    height: 48px;
                    border: 1px solid #b4282d;
                    background: #b4282d;
                    color: #fff; 
                }
            }
        }
        .masks{
            padding: 15px;
            width: 345px;
            p{
               text-align: left; 
            }
            .img{
                height: 88px;
                display: flex;
                img{
                    margin-right:15px ;
                }
                .text{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    p{
                        margin:0;
                        width: 60px;
                        text-align: left;
                    }
                }
            }
            .box{
                height: 28px;
                display: flex;
                button{
                    width: 28px;
                    height: 28px;
                    border: 0;
                    position: relative;
                    box-sizing: border-box;
                }
                input{
                    width: 32px;
                    height: 28px;
                    border: 0;
                    background-color: #f2f3f5;
                    padding: 0;
                    text-align: center;
                    margin: 0 2px;
                }
                .let::after,.add::after{
                    content: "";
                    display: block;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    background-color: rgb(115,116,117);
                    width: 14px;
                    height: 1px;
                }
                .let.active{
                    background-color: #f7f8fa;
                }
                .let.active::after{
                    background-color: #c8c9cc;
                }
                .add::before{
                    content: "";
                    display: block;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    background-color: rgb(115,116,117);
                    height: 14px;
                    width: 1px;
                }
            }
        }
    }
</style>
